import type { Metadata } from "next";
import "./globals.css";
import { ConfigProvider, Divider } from "antd";
import "@ant-design/v5-patch-for-react-19";
import { Image } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import BubbleCard from "@/components/BubbleCard";
import { LinkOutlined, PhoneOutlined, QrcodeOutlined } from "@ant-design/icons";

export const metadata: Metadata = {
  title: "监测认证公示中心",
  description: "这是一个基于 Next.js 的多页面网站",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body suppressHydrationWarning={true}>
        <ConfigProvider locale={zhCN}>
          {/* 气泡卡片1 - 下面的卡片 */}
          <BubbleCard
            position="bottom-right"
            icon={
              <PhoneOutlined style={{ fontSize: "32px", color: "white" }} />
            }
            text="热线电话"
            bubbleColor="bg-blue-500"
            offset={4.2}
            content={
              <div className="w-64 flex flex-col justify-center items-center bg-gradient-to-b from-[#F0F4FC] to-[white] p-4 rounded-sm -m-4">
                <div className="text-sm text-[#2F2F2F]">热线电话</div>
                <Divider orientation="right" plain>
                  HOT-PHONE
                </Divider>
                <div className="text-3xl text-black">400-926-2888</div>
                <div className="text-[#9AA3B5]">
                  请您拨打以上电话，和我们联系!
                </div>
              </div>
            }
          />

          {/* 气泡卡片2 - 上面的卡片 */}
          <BubbleCard
            position="bottom-right"
            text="小程序"
            icon={
              <QrcodeOutlined style={{ fontSize: "32px", color: "white" }} />
            }
            offset={3} // 第二个卡片，向上偏移70px
            content={
              <div className="w-64 flex flex-col justify-center items-center bg-gradient-to-b from-[#F0F4FC] to-[white] p-4 rounded-sm -m-4">
                <div className="text-sm  text-[#2F2F2F]">
                  <LinkOutlined className="mr-2" />
                  小程序
                </div>
                <Divider orientation="right" plain></Divider>
                <div className=" text-3xl text-black">
                  <Image
                    src="/images/weima.jpg"
                    alt="weima"
                    width={200}
                    height={200}
                  />
                </div>
                <div className="text-[#9AA3B5]">请扫二维码，查看小程序</div>
              </div>
            }
          />
          <Header />
          <main className="mx-auto">{children}</main>
          <Footer />
        </ConfigProvider>
      </body>
    </html>
  );
}
